<template>
  <div id="watchTbChart" style="height:200px" v-loading="loading"></div>
</template>
<script>
export default {
  name: "watchTbChart",
  props: ['watchTbData', 'loading'],
  watch: {
    watchTbData: {
      handler (value) {
        console.log(value)
        this.initCharts(value);
      },
      deep: true,
    },
    loading: {
      handler (value) {
        this.loading = value
      },
      deep: true,
    }
  },
  data () {
    return {
      loading: ''
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    initCharts (val) {
      let myCharts = this.$echarts.init(document.getElementById('watchTbChart'));
      let option = {
        title: {
          text: val.paramName,
          left:'20px',
          top:'0px',
          textStyle: {
            fontSize:14,
            color: "#696969"
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: val.dateList,
          axisLabel: {//修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#8DB6DB"
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {//修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#8DB6DB"
            }
          },
        },
        grid: {
          x: 40,
          y: 40,
          y2: 20,
        },
        series: [
          {
            name: val.paramName,
            data: val.paramDataList,
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#00FF00'
            },
            areaStyle: {
              color: '#309FEA',
              opacity: 0.1,
              origin: 'start'
            }
          }
        ]
      };
      myCharts.setOption(option, true);
      window.addEventListener("resize", () => {
        myCharts.resize();
      });
    }
  }
}
</script>
<style>
#watchTbChart {
  z-index: 999;
  padding-left: 5px;
}
</style>